<template>
  <el-dialog :title="isEdit?'编辑节假日管理':'新增节假日管理'"
             :visible.sync="dialogForm"
             width="720px">
    <el-form :inline="true"
             ref="form"
             :model="form"
             :rules="rules"
             class="add-form"
             label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="节假日名称"
                        prop="festivalName">
            <el-input v-model="form.festivalName"
                      placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属单位"
                        prop="orgId" label-width="80px">
            <auto-search-org v-model="form.orgId"
                             @select="v=>{form.orgId=v;form.deptId='';form.deptName=''}"
                             @selectName="v=>form.orgName=v"
                             :disabled="true"
                             :name="form.orgName"></auto-search-org>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="日历类型"
                        prop="festivalTypeDesc">
            <el-select v-model="form.festivalTypeDesc" placeholder="请选择">
                <el-option v-for="[key, val] in _dictCalendarType" :key="key" :label="val"
                        :value="key"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="日期" prop="festivalDateStr" class="vuepicker" label-width="80px">
            <j-date-picker v-model="form.festivalDateStr"
                   :width="width1"
                   placeholder="请选择日期"
                   :rangeSeparator="rangeSeparator"
                   :disabled="disabled"
                   :showLunarClass="showLunarClass"
                   :showLunarControl="showLunarControl"
                   :type="type"
                   :showLunarIcon="showLunarIcon"
                   :format="format">
            </j-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注"
                        prop="remark">
            <el-input type="textarea"
                      :rows="3"
                      style="width: 560px"
                      placeholder="请输入内容"
                      :maxLength="$maxLength"
                      v-model="form.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="dialogForm = false">取 消</el-button>
      <el-button type="primary"
                 @click="handleSubmit"
                 :loading="$store.getters.loadingBtn">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import JDatePicker from 'vue-jlunar-datepicker'

import {
  addHolidayManagement,
  updateHolidayManagement
} from '@/api/holidayManagement/holidayManagement'
import autoSearchOrg from '@/components/autocomplete/autoSearchOrg'
import autoSearchDic from '@/components/autocomplete/autoSearchDic'
import autoSearchTer from '@/components/autocomplete/autoSearchTer'
import searchDept from '@/components/autocomplete/autoSearchDept'
import { maxLength, sortLength } from '@/utils/rules'
import { PUBLIC_CHINESE } from '@/utils/Reg'
export default {
  name: 'adminWarehouseAddForm',
  components: {
    autoSearchOrg,
    searchDept,
    autoSearchDic,
    autoSearchTer,
    JDatePicker
  },
  data() {
    return {
      form: this.clearForm(),
      rules: {
        festivalName: [
          { required: true, validator: PUBLIC_CHINESE, trigger: 'blur' },
          sortLength
        ],
        // orgId: [{ message: '请选择单位', trigger: 'change' }],
        festivalTypeDesc: [
          { required: true, message: '请选择日历类型', trigger: 'blur' }
        ],
        festivalDateStr:[{ required: true, message: '请选择日期', trigger: 'blur' }],
        remark: [maxLength]
      },
      dialogForm: false,
      isEdit: false,
      // 日历插件
      msg: 'Welcome to Your Vue.js App',
      type: 'DATE',
      showLunarClass: 'MIX',
      showBackYears: 2,
      showLunarIcon: true,
      showLunarControl: true,
      width1: '240',
      format: 'YYYY.MM.DD',
      rangeSeparator: '-',
      disabled: false,
      editable: true,
      clearable: true,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      }
    }
  },
  methods: {
    onDayClick2() {},
    clearForm() {
      return {
        festivalName: '',
        orgId: '',
        orgId:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.id,
        orgName:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.name,
        festivalTypeDesc: '',
        festivalDateStr:'',
        remark: ''
      }
    },
    // 保存
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.isEdit ? this.handleToEdit() : this.handleToAdd()
        } else {
          this.$message({
            message: '请检查表单',
            type: 'error'
          })
        }
      })
    },
    // 新增
    handleToAdd() {
      addHolidayManagement(this.form).then(res => {
        this.$message({ message: '新增成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
      })
    },
    // 编辑
    handleToEdit() {
      updateHolidayManagement(this.form.id, this.form).then(res => {
        this.$message({ message: '编辑成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
      })
    },
    handleCllx(v) {
      if (v === 'JOB_CLLX_HC') {
        this.form.teu = 0
      }
      this.form.typeCode = v
    }
  },
  watch: {
    dialogForm(bool) {
      if (!bool) {
        this.$refs.form.resetFields()
        this.isEdit = false
        this.form = this.clearForm()
        this.$emit('clear')
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.vuepicker /deep/ {
  .full-jcalendar__body .week-row {
    line-height: initial;
  }
}

.event-calendar /deep/ {
  .datepicker-inner {
    width: 380px;
  }
  .datepicker-body {
    span {
      width: 50px;
      height: 44px;
      line-height: 20px;
      vertical-align: top;
    }
    .event {
      color: #e56700;
    }
    .low {
      color: red;
      font-weight: bold;
    }
    .datepicker-monthRange span {
      width: 100px;
      height: 100px;
      vertical-align: middle;
      line-height: 100px;
    }
  }
}
</style>
